import type { Meta, StoryObj } from "@storybook/react";
import type { TemplateVersionExternalAuth } from "api/typesGenerated";
import { ExternalAuthButton } from "./ExternalAuthButton";

const MockExternalAuth: TemplateVersionExternalAuth = {
	id: "",
	type: "",
	display_name: "GitHub",
	display_icon: "/icon/github.svg",
	authenticate_url: "",
	authenticated: false,
};

const meta: Meta<typeof ExternalAuthButton> = {
	title: "pages/CreateWorkspacePage/ExternalAuthButton",
	component: ExternalAuthButton,
};

export default meta;
type Story = StoryObj<typeof ExternalAuthButton>;

export const Github: Story = {
	args: {
		auth: MockExternalAuth,
	},
};

export const GithubOptional: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			optional: true,
		},
	},
};

export const GithubWithRetry: Story = {
	args: {
		auth: MockExternalAuth,
		displayRetry: true,
	},
};

export const GithubAuthenticated: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			authenticated: true,
		},
	},
};

export const Gitlab: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/gitlab.svg",
			display_name: "GitLab",
			authenticated: false,
			optional: true,
		},
	},
};

export const GitlabAuthenticated: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/gitlab.svg",
			display_name: "GitLab",
			authenticated: true,
		},
	},
};

export const AzureDevOps: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/azure-devops.svg",
			display_name: "Azure DevOps",
			authenticated: false,
			optional: true,
		},
	},
};

export const AzureDevOpsAuthenticated: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/azure-devops.svg",
			display_name: "Azure DevOps",
			authenticated: true,
		},
	},
};

export const Bitbucket: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/bitbucket.svg",
			display_name: "Bitbucket",
			authenticated: false,
			optional: true,
		},
	},
};

export const BitbucketAuthenticated: Story = {
	args: {
		auth: {
			...MockExternalAuth,
			display_icon: "/icon/bitbucket.svg",
			display_name: "Bitbucket",
			authenticated: true,
		},
	},
};
